<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>分类列表</title>
		<link rel="stylesheet" type="text/css" href="../static/css/elementui-ui-font.css" />
		<link rel="stylesheet" type="text/css" href="../static/css/elementui.css" />
		<script src="../static/js/Vue-2.6.12.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/elementui.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.avatar-uploader .el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 178px;
				height: 78px;
				line-height: 78px;
				text-align: center;
			}

			.avatar {
				width: 178px;
				height: 78px;
				display: block;
			}
			.el-row {
			    margin-bottom: 20px;
			    &:last-child {
			         margin-bottom: 0;
			     }
			}
			.el-col {
			    border-radius: 4px;
			}
			.grid-content {
			    border-radius: 4px;
			    min-height: 36px;
			}
		</style>
	</head>
	<body>

		<div id="app">
			<el-row :gutter="22">
			</el-row>
			<el-row :gutter="23">
				<el-col :span="2">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="20">
					<el-form :inline="true" :model="searchForm" class="demo-form-inline">
						<el-form-item label="分类名">
							<el-input v-model="searchForm.name" placeholder="分类名"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="findList">查询</el-button>
							<el-button type="success" @click="dialogFormVisible=true,category={}">新增</el-button>
							<el-button type="success" @click="goParent" v-if="parentIds.length>1">返回上级</el-button>
						</el-form-item>
					</el-form>

					<el-table :data="categoryList" style="width: 100%" border>
						<el-table-column prop="id" label="编号" width="120">
						</el-table-column>
						<el-table-column prop="name" label="分类" width="250">
						</el-table-column>
						<el-table-column prop="goodsNum" label="商品数量" width="100">
						</el-table-column>
						<el-table-column label="菜单级别" width="100">
							<template>
								{{parentIds.length}}
							</template>
						</el-table-column>
						<el-table-column label="是否显示" width="120">
							<template slot-scope="scope">
								<el-switch v-model="scope.row.isShow" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
								 inactive-value="0">
								</el-switch>
							</template>
						</el-table-column>
						<el-table-column label="是否导航" width="120">
							<template slot-scope="scope">
								<el-switch v-model="scope.row.isMenu" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
								 inactive-value="0">
								</el-switch>
							</template>
						</el-table-column>
						<el-table-column prop="seq" label="排序" width="120">
						</el-table-column>
						<el-table-column label="设置" width="250">
							<template slot-scope="scope">
								<!--                <el-link type="primary" @click="saveParent(scope.row.id)">新增下级</el-link>-->
								<el-link type="primary" @click="findParent(scope.row.id)" v-if="parentIds.length<3">查看下级</el-link>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="primary" @click="edit(scope.row.id)" icon="el-icon-edit" circle></el-button>
								<el-button type="danger" @click="del(scope.row.id)" icon="el-icon-delete" circle></el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="findList" @current-change="findList" :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]"
					 :page-size.sync="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>

					<!-- 新增窗口 -->
					<el-dialog title="保存" :visible.sync="dialogFormVisible">
						<el-form :model="category">
							<el-form-item label="分类编号" label-width="100px" hidden>
								<el-input v-model="category.id"></el-input>
							</el-form-item>
							<el-form-item label="分类名称" label-width="100px">
								<el-input v-model="category.name"></el-input>
							</el-form-item>
							<el-form-item label="是否显示" label-width="100px">
								<el-switch v-model="category.isShow" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
								 inactive-value="0">
								</el-switch>
							</el-form-item>
							<el-form-item label="是否导航" label-width="100px">
								<el-switch v-model="category.isMenu" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
								 inactive-value="0">
								</el-switch>
							</el-form-item>
							<el-form-item label="选择模板" label-width="100px">
								<el-select v-model="category.templateId" placeholder="请选择">
									<el-option v-for="(template,index) in templateList" :key="index" :label="template.name" :value="template.id"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="排序" label-width="100px">
								<el-input v-model="category.seq" autocomplete="off"></el-input>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<el-button type="primary" @click="save">保存</el-button>
						</div>
					</el-dialog>

				</el-col>
				<el-col :span="1">
					<div class="grid-content bg-purple"></div>
				</el-col>
		</div>

		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: function() {
					return {
						categoryList: [],
						total: 100,
						size: 10,
						currentPage: 1,
						searchForm: {
							parentId: 0
						},
						dialogFormVisible: false,
						category: {},
						parentIds: [0],
						templateList: [],
						templateName: ''
					}
				},
				methods: {
					findTemplateList() {
						axios.get(`/api/template/findList.do`).then((resp) => {
							this.templateList = resp.data
						}).catch((error) => {
							this.$message.error("模板列表读取失败，请刷新重试！")
						})
					},
					findList() {
						axios.post(`/api/category/findcondtionpage.do?startpage=${this.currentPage}&pagesize=${this.size}`, this.searchForm)
							.then(
								response => {
									this.categoryList = response.data.records
									this.total = response.data.total
								}).catch(function(error) {
								console.log(error);
							})
					},
					save() {
						let id = this.category.id
						let action = id == null ? 'save' : 'update'
						this.category.parentId = this.searchForm.parentId
						axios.post(`/api/category/${action}.do`, this.category).then((response) => {
							if (response.data.code == 1) {
								this.dialogFormVisible = false
								this.$message.error(response.data.msg)
							} else {
								this.dialogFormVisible = false
								this.$message({
									message: response.data.msg,
									type: 'success',
								})
							}
							this.findList()
						}).catch((error) => {
							this.$message({
								message: '添加失败，请重试或请联系管理员',
								type: 'warning',
							})
						})

					},
					edit(id) {
						this.dialogFormVisible = true
						axios.get(`/api/category/findbyid.do?id=${id}`).then((resp) => {
							this.category = resp.data
							this.findList()
						})
					},
					del(id) {
						this.$confirm("确认删除？", '确认删除').then(() => {
							axios.get(`/api/category/deletebyid.do?id=${id}`).then((response) => {
								if (response.data.code == 1) {
									this.$message.error(response.data.msg)
								} else {
									this.$message.success(response.data.msg)
								}
								this.findList()
							})
						})
					},
					findParent(parentId) {
						this.currentPage = 1;
						this.searchForm.parentId = parentId
						this.parentIds.push(parentId)
						this.findList()
					},
					goParent() {
						this.parentIds.pop()
						this.searchForm.parentId = this.parentIds[this.parentIds.length - 1]
						this.findList()
					}
				},
				created() {
					this.findList()
					this.findTemplateList()
				}
			})
		</script>
	</body>
</html>
